<!-- 预约服务-组件模板 -->
<template>
	<view class="mianDoms">
		<view class="reservationDoms">
			
			<!-- 广告图 -->
			<view class="adDoms">
				<image src="/static/home/bn.png" mode="widthFix"></image>
				<view class="adTexts flexDom alignItems">
					<view class="flexOne marginRight20">
						<view class="flexDom alignItems marginBottom20">
							<text class="marginRight10">仙儿按摩馆</text>
							<image src="/static/home/mendian.png" mode="widthFix" style="width: 65px;"></image>
						</view>
						<view class=" marginBottom20">
							营业时间：24小时营业
						</view>
						<view>
							门店位置：全国连锁，全国均可小程序提前预约到店享受服务
						</view>
					</view>
					<view class="textAlign" @click="callPhone('19567324561')">
						<image class="marginBottom10" src="/static/home/phone.png" mode="widthFix" style="width: 60px;"></image>
						<view class="fontSize12">致电商家</view>
					</view>
				</view>
			</view>
			
			<view>
				<form @submit="formSubmit" @reset="formReset">
					<view class="formItem marginBottom30">
						<view class="title">预约项目</view>
						<view class="flexDom">
							<view :class="active==1?'flexItem flexItemActive flexOne marginRight20': 'flexItem flexOne marginRight20'" @click="active=1">
								<view class="fontWeight marginBottom10">中式按摩</view>
								<view>
									<view>￥218元</view>
									<view>60分钟</view>
								</view>
							</view>
							<view :class="active==2?'flexItem flexItemActive flexOne marginRight20': 'flexItem flexOne marginRight20'" @click="active=2">
								<view class="fontWeight marginBottom10">通络培元</view>
								<view>
									<view>￥298元</view>
									<view>80分钟</view>
								</view>
							</view>
							<view :class="active==3?'flexItem flexItemActive flexOne marginRight20': 'flexItem flexOne marginRight20'" @click="active=3">
								<view class="fontWeight marginBottom10">泰式SPA</view>
								<view>
									<view>￥398元</view>
									<view>120分钟</view>
								</view>
							</view>
							<view :class="active==4?'flexItem flexItemActive flexOne': 'flexItem flexOne'" @click="active=4">
								<view class="fontWeight marginBottom10">法式SPA</view>
								<view>
									<view>￥498元</view>
									<view>120分钟</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="formItem marginBottom30">
						<view class="title">预约信息</view>
						<view class="flexDom alignItems marginBottom20">
							<view>联系人：</view>
							<input class="uni-input flexOne" name="name" :value="order.name" @input="onInputName" placeholder="请输入您的姓名" />
						</view>
						<view class="flexDom alignItems">
							<view>手机号：</view>
							<input class="uni-input flexOne" name="phone" :value="order.phone" @input="onInputPhone" placeholder="确保无误，否则我们联系不到您" />
						</view>
					</view>
					
					<view class="formItem marginBottom30">
						<view class="title">预约备注</view>
						<input class="uni-input" name="beizhu" :value="order.beizhu" @input="onInputReback" placeholder="请输入下单备注" style="width: 100%;" />
					</view>
					
					<!-- <view class="formItem marginBottom30">
						<view class="title">预约说明</view>
						<view class="color999">1、预约支付金额为订金，完成预约后，实际享受服务时，需补齐项目金额</view>
					</view> -->
					
				</form>
			</view>
		</view>
		
		<!-- 预约按钮 -->
		<view class="yuyueBtnsDoms textRight">
			<!-- <text class="mainColor flexOne">定金：￥50元</text> -->
			<button class="xmBtton" form-type="submit" @click="formSubmit">立即预约</button>
		</view>
	</view>
</template>

<!-- 组件核心js -->
<script>
	export default {
		data() {
			return {
				companyId: null,  // 公司id
				info: {},
				active: 1,
				order: {
					platform: 'alipay',  // 平台 值范围：alipay，weixin
					appid: '',
					name: '',
					phone: '',
					beizhu: ''
				},
				list: [
					{id:1, name: '舒乐养生', distance: 0.5, time: '10个月', serversNums: 1262},
					{id:2, name: '青禾养生', distance: 0.9, time: '3年', serversNums: 3153},
					{id:3, name: '西岚养生', distance: 1.2, time: '5年', serversNums: 5270},
					{id:4, name: '舒悦养生', distance: 2.3, time: '新店开张', serversNums: 170}
				]
			};
		},
		onLoad(options) {
			// 如果传参了
			if(options.id) {
				this.companyId = options.id;
				// 初始化数据
				this.initData();
			}
			// 赋值
			this.order.appid = this.getCurrAppId();
		},
		methods: {
			
			/**
			 * 初始化-
			 */
			initData() {
				let arr = this.list.filter(item => item.id = this.companyId);
				if(arr) {
					this.info = arr[0];
				}
			},
			
			/**
			 * 获取，当前AppId-函数
			 * */
			getCurrAppId() {
				return my.getAppIdSync().appId;
			},
			
			/**
			 * 拨打电话-函数
			 * */
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			
			onInputName(e) {
				this.order.name = e.detail.value;
			},
			
			onInputPhone(e) {
				this.order.phone = e.detail.value;
			},
			
			onInputReback(e) {
				this.order.beizhu = e.detail.value;
			},
			
			/**
			 * 立即预约-按钮-事件
			 */
			formSubmit() {
				if(this.order.phone) {
					let path = this.$apiNames.APPOINT;
					this.$myhttps(path, this.order, "POST").then(res => {
						if(res.code == 200) {
							uni.showModal({
								content: '恭喜您，预约成功~',
								showCancel: false
							});
							// 清空数据
							this.order.name = '';
							this.order.phone = '';
							this.order.beizhu = '';
						} else {
							this.$Msg(res.msg ? res.msg : "立即预约失败，请联系管理员！");
						}
					})
				} else {
					uni.showModal({
						content: '请输入预约信息~',
						showCancel: false
					});
				}
			},
			
			/**
			 * 重置-按钮-事件
			 */
			formReset(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<!-- 当前页面css -->
<style lang="scss" scoped>
	page{
		background: #f8f8f8;
	}
	.flexDom{
		display: flex;
	}
	.flexOne {
		flex: 1;
	}
	.textRight {
		text-align: right;
	}
	.mainColor{
		color: #7c89d9;
	}
	.alignItems{
		align-items: center;
	}
	.fontSize12 {
		font-size: 24upx;
	}
	.colorWhite{
		color: #FFFFFF;
	}
	.color666{
		color: #666666;
	}
	.color999{
		color: #999999;
	}
	.fontWeight {
		font-weight: bold;
	}
	.textAlign{
		text-align: right;
	}
	.bordrBottom666{
		border-bottom: 1px solid #666666;
	}
	.paddingBottom20{
		padding-bottom: 20upx;
	}
	.paddingBottom30{
		padding-bottom: 30upx;
	}
	.marginBottom10 {
		margin-bottom: 10upx;
	}
	.marginBottom20 {
		margin-bottom: 20upx;
	}
	.marginBottom30 {
		margin-bottom: 30upx;
	}
	.marginRight10 {
		margin-right: 10upx;
	}
	.marginRight20 {
		margin-right: 20upx;
	}
	.mianDoms{
		position: relative;
		padding-bottom: 140upx;
		.adDoms {
			background: #FFFFFF;
			margin-bottom: 40upx;
			border-radius: 20upx;
			image {
				width: 100%;
				border-radius: 20upx;
			}
			.adTexts {
				padding: 20upx 20upx 30upx;
			}
		}
		.xmBtton {
			display: inline-block;
			background: #7c89d9;
			font-size: 30upx;
			color: #FFFFFF;
			line-height: 60upx;
			padding: 15upx 40upx;
			border-radius: 60upx;
		}
		.yuyueBtnsDoms {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #FFFFFF;
			padding: 30upx 30upx 50upx 30upx;
			box-sizing: border-box;
		}
	}
	.reservationDoms {
		margin: 40upx 30upx;
		.listDoms {
			background: #FFFFFF;
			border-radius: 20upx;
			padding: 30upx 20upx;
			.xmDoms {
				width: 180upx;
			}
			.xmTitle {
				background: #7c89d9;
				font-size: 32upx;
				padding: 15upx 40upx 15upx 15upx;
				border-radius: 0 40upx 40upx 0;
				margin-right: 20upx;
			}
			.mainBg {
				display: inline-block;
				background: #7c89d9;
				padding: 10upx;
				font-size: 24upx;
				border-radius: 15upx;
			}
		}
		.formItem {
			background: #FFFFFF;
			padding: 30upx 20upx;
			border-radius: 10upx;
			.title {
				font-weight: bold;
				padding-bottom: 20upx;
				margin-bottom: 30upx;
				border-bottom: 1px solid #999999;
			}
			.flexItem {
				background: #7c89d910;
				padding: 10upx;
				font-size: 24upx;
				border: 1px solid #7c89d910;
				border-radius: 10upx;
				color: #7c89d9;
				text-align: center;
			}
			.flexItemActive {
				border: 1px solid #7c89d9;
			}
		}
	}
</style>
